<!-- 产品碳足迹-碳足迹报告 -->

<template>
  <div>
    <div class="m_contentBox">
      <a-card :bordered="false">
        <div class="m_aCardBox">
          <div class="tabBox">
            <div class="table-page-search-wrapper">
              <a-form layout="inline">
                <a-row :gutter="24">
                  <a-col :span="5">
                    <a-form-model-item :label="$t('message.Product_name')">
                      <a-input
                        v-model="queryParam.productName"
                        allowClear
                        :placeholder="$t('message.Please_enter')"
                      ></a-input>
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="5">
                    <a-form-model-item
                      :label="$t('message.Life_cycle_boundary')"
                    >
                      <a-select
                        v-model="queryParam.lifeCycleType"
                        :placeholder="$t('message.Please_select')"
                        show-search
                        :filter-option="filterOption"
                        style="width: 100%"
                      >
                        <a-select-option
                          :value="item.value"
                          v-for="(item, index) in productData"
                          :key="index"
                        >
                          {{ item.name }}
                        </a-select-option>
                      </a-select>
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="5">
                    <a-form-model-item :label="$t('message.State')">
                      <a-select
                        v-model="queryParam.state"
                        :placeholder="$t('message.Please_select')"
                        show-search
                        :filter-option="filterOption"
                        style="width: 100%"
                      >
                        <a-select-option
                          :value="item.value"
                          v-for="(item, index) in stateList"
                          :key="index"
                        >
                          {{ item.name }}
                        </a-select-option>
                      </a-select>
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="5">
                    <a-form-model-item :label="$t('message.accounting_cycle')">
                      <a-range-picker
                        :format="dateFormat"
                        valueFormat="YYYY/MM/DD"
                        v-model="queryParam.times"
                        @change="handleChange"
                      />
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="4">
                    <a-form-model-item label="" style="">
                      <div
                        style="
                          width: 100%;
                          display: flex;
                          justify-content: flex-end;
                        "
                      >
                        <a-button type="primary" @click="searchQuery">{{
                          $t("message.Search")
                        }}</a-button>
                        <a-button
                          style="margin-left: 8px"
                          @click="searchReset"
                          >{{ $t("message.Reset") }}</a-button
                        >
                      </div>
                    </a-form-model-item>
                  </a-col>
                </a-row>
              </a-form>
            </div>
          </div>
          <!-- 表格 -->
          <div class="cardBox">
            <div class="butons" @click="onDRawer">
              <div class="twsr">
                {{ $t("message.Apply_for_a_carbon_footprint_label") }}
              </div>
            </div>
            <div class="m_mt24">
              <a-table
                ref="table"
                :columns="columns"
                :dataSource="dataSource"
                :loading="loading"
                :pagination="ipagination"
                :scroll="{ x: true }"
                :bordered="false"
                class=""
                rowKey="id"
                size="middle"
                @change="handleTableChange"
              >
                <div slot="lifeCycleType" slot-scope="text, record">
                  {{
                    record.lifeCycleType == 1
                      ? "从摇篮到大门"
                      : record.lifeCycleType == 2
                      ? "从摇篮到坟墓"
                      : record.lifeCycleType == 3
                      ? "自定义"
                      : ""
                  }}
                </div>
                <div slot="times" slot-scope="text, record">
                  {{ record.beginTime }}--{{ record.endTime }}
                </div>
                <div slot="State" slot-scope="text, record">
                  <a-switch
                    v-model="record.state"
                    default-checked
                    @change="onChange($event, record)"
                  />
                </div>
                <div
                  class="m_cbFlex"
                  style="padding: 0 5px"
                  slot="action"
                  slot-scope="text, record"
                >
                  <a @click="onEdit(record)">{{ $t("message.Edit") }}</a>
                  <a @click="onPreview(record)">{{ $t("message.Preview") }}</a>
                  <a-popconfirm
                    :title="$t('message.Confirm_delete')"
                    :cancelText="$t('message.Cancel')"
                    :okText="$t('message.Confirm')"
                    @confirm="() => onDelete(record)"
                  >
                    <a>{{ $t("message.Delete") }}</a>
                  </a-popconfirm>
                </div>
              </a-table>
            </div>
          </div>
        </div>
      </a-card>
    </div>
    <!-- 申请 -->
    <section class="m_popupBox" v-if="isAss">
      <moduleIndex ref="moduleIndex" @back="onBack" />
    </section>
    <!--  碳足迹标签弹窗  -->
    <a-modal
      :title="$t('message.Check_the_carbon_footprint_label')"
      okText="下载"
      :visible="isGenerateAssIng"
      @ok="closeReportModal"
      @cancel="closeReportCancel"
    >
      <a-spin :spinning="createReportIng">
        <div class="flecCenter">
          <img :src="theCarbonImg" class="theCarbonImg" alt="" />
          <div class="flwMondes">
            {{ $t("message.Generation_time") }}:{{ createTime }}
          </div>
        </div>
      </a-spin>
    </a-modal>
  </div>
</template>

<script>
import { cloneObject } from "@/utils/util";
import { deleteAction, getAction, postAction } from "@/api/manage";
import moduleIndex from "./module/index.vue";
import { downFile } from "@api/manage";
export default {
  name: "footprintReportView",
  components: {
    moduleIndex,
  },
  data() {
    return {
      isAss: false,
      loading: false,
      queryParam: {},
      dateFormat: "YYYY/MM/DD",
      isGenerateAssIng: false,
      createReportIng: false, // 碳足迹报告弹窗加载状态
      theCarbonImg: "",
      createTime: "",
      columns: [
        {
          title: this.$t("message.Product_name"),
          align: "center",
          dataIndex: "productName",
          width: 150,
        },
        {
          title: this.$t("message.Accounting_quantity"),
          align: "center",
          dataIndex: "calculateNumber",
          width: 150,
        },
        {
          title: this.$t("message.Unit"),
          align: "center",
          dataIndex: "productWeightUnit",
          width: 150,
        },
        {
          title: this.$t("message.Product_carbon_footprint") + "(kgCO₂e)",
          align: "center",
          dataIndex: "carbonEmissionTotal",
          width: 150,
        },
        {
          title: this.$t("message.Life_cycle_boundary"),
          align: "center",
          dataIndex: "lifeCycleType",
          scopedSlots: { customRender: "lifeCycleType" },
          width: 150,
        },
        {
          title: this.$t("message.Data_cycle"),
          align: "center",
          dataIndex: "productWeight",
          scopedSlots: { customRender: "times" },
          width: 150,
        },
        {
          title: this.$t("message.State"),
          align: "center",
          dataIndex: "State",
          scopedSlots: { customRender: "State" },
          width: 150,
        },
        {
          title: this.$t("message.View_times"),
          align: "center",
          dataIndex: "watchNumber",
          width: 150,
        },
        {
          title: this.$t("message.Update_person"),
          align: "center",
          dataIndex: "updateBy_dictText",
          width: 150,
        },
        {
          title: this.$t("message.Update_date"),
          align: "center",
          dataIndex: "updateTime",
          width: 150,
        },
        {
          title: this.$t("message.Handle"),
          dataIndex: "action",
          align: "center",
          fixed: "right",
          width: 150,
          scopedSlots: { customRender: "action" },
        },
      ],
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ["10", "20", "30"],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条";
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
      stateList: [
        {
          name: "启用",
          value: true,
        },
        {
          name: "关闭",
          value: false,
        },
      ],
      productData: [
        {
          name: "从摇篮到大门",
          value: 1,
        },
        {
          name: "从摇篮到坟墓",
          value: 2,
        },
        {
          name: "自定义",
          value: 3,
        },
      ],
      dataSource: [], // 数据
      disabled: false,
      visible: false,
    };
  },
  created() {
    this.getData();
  },
  methods: {
    closeReportCancel() {
      this.isGenerateAssIng = false;
    },
    closeReportModal() {
      // this.downloadImage(this.theCarbonImg)
      console.log('exportXlsTemplate', this.theCarbonImg)
      window.open(this.theCarbonImg, '_blank')
    },
    // downloadImage(url, filename = 'image.png') {
    //   fetch(url)
    //     .then(response => response.blob())
    //     .then(blob => {
    //       const blobUrl = window.URL.createObjectURL(blob);
    //       const a = document.createElement('a');
    //       a.href = blobUrl;
    //       a.download = filename;
    //       document.body.appendChild(a);
    //       a.click();
    //       window.URL.revokeObjectURL(blobUrl); // 清理内存
    //       document.body.removeChild(a);
    //     })
    //     .catch(error => {
    //       console.error('下载失败:', error);
    //     });
    // },

    handleChange(e) {
      console.log(e);
      this.queryParam.beginTime = e[0];
      this.queryParam.endTime = e[1];
    },
    onBack() {
      this.isAss = false;
      this.getData();
    },
    onChange(e, code) {
      console.log(e, code);
      postAction(
        "/footprintProduct/cyFootprintProductCalculateLabel/editLabel",
        code
      ).then((res) => {
        if (res.success) {
          this.$message.success(this.$t("message.operation_success"));
          this.getData();
        }
      });
    },
    onDelete(value) {
      deleteAction(
        "/footprintProduct/cyFootprintProductCalculateLabel/removeById",
        {
          id: value.id,
        }
      ).then((res) => {
        if (res.success) {
          this.$message.success(this.$t("message.delete_success"));
          this.getData();
        }
      });
    },
    /**
     * 新建
     */
    onDRawer() {
      this.isAss = true;
      setTimeout(() => {
        this.$refs.moduleIndex.type = 1;
        this.$refs.moduleIndex.getProductList();
      }, 100);
    },
    /**
     * 编辑
     */
    onEdit(value) {
      console.log(value);
      this.isAss = true;
      this.$nextTick(() => {
        this.$refs.moduleIndex.disable = true;
        this.$refs.moduleIndex.type = 2;
        this.$refs.moduleIndex.queryParam = value;
        this.$refs.moduleIndex.getUpdate();
      });
    },
    /**
     * 下拉框数据过滤
     */
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    /**
     * 下载碳足迹报告
     */
    onPreview(item) {
      this.isGenerateAssIng = true;
      this.theCarbonImg = window._CONFIG['staticDomainURL'] + "/" +  item.qrcode;
      this.createTime = item.createTime;
    },
    /**
     * 查询
     */
    searchQuery() {
      console.log("searchQuery");
      this.ipagination.current = 1;
      this.getData();
    },
    /**
     * 重置
     */
    searchReset() {
      console.log("searchReset");
      this.queryParam = {};
      this.ipagination.current = 1;
      this.getData();
    },
    handleTableChange(pagination) {
      console.log(pagination);
      this.ipagination = pagination;
      this.getData();
    },
    getData() {
      let reqData = cloneObject(this.queryParam);
      reqData.pageNo = this.ipagination.current;
      reqData.pageSize = this.ipagination.pageSize;
      getAction(
        "/footprintProduct/cyFootprintProductCalculateLabel/list",
        reqData
      ).then((res) => {
        if (res.success) {
          this.dataSource = res.result.records || [];
          this.ipagination.total = res.result.total;
        }
      });
    },
  },
};
</script>

    <style lang="less" scoped>
.flwMondes {
  font-weight: 400;
  font-size: 14px;
  color: #888888;
  margin-top: 24px;
}
.flecCenter {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.theCarbonImg {
  width: 279px;
  height: 375px;
}
.drawerOptionBox {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  border-top: 1px solid #e9e9e9;
  padding: 10px 16px;
  background: #fff;
  text-align: right;
  z-index: 1;
}
.butons {
  background: #148958;
  border-radius: 3px 3px 3px 3px;
  padding: 5px 12px;
  display: inline-flex;
  align-items: center;
}
.twsr {
  font-weight: 400;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
}
.img3 {
  width: 16px;
  height: 16px;
  margin-right: 8px;
}
/deep/ .ant-card-body {
  background: #f5f8f7;
}

.tabBox {
  padding: 24px 24px 0;
  background: #ffffff;
  border-radius: 3px;
}

.cardBox {
  margin-top: 24px;
  padding: 24px;
  background: #ffffff;
  border-radius: 3px;
}
</style>
